<template>
  <base-table :tableData="tableData" :columns="columns" @selection-change="selectionChange">
    <template #default="scope">
      <base-button @click="fnCrud(scope.row)">详情</base-button>
    </template>
  </base-table>
  <!-- <base-pagination
    :options="options"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  /> -->
  <!-- paging-mode="local" -->
  <div class="flex-shrink-0" :class="obj.isMb ? 'mb-20' : ''">
    <base-form ref="vehicleForm" :model="model" :formItems="formItems">
      <template #search>
        <base-button type="primary" plain @click="fnRefreshTable">查询</base-button>
        <base-button plain @click="handleClear()">清空</base-button>
      </template>
    </base-form>
    <delete-button
      type="danger"
      api-url="/basic/Vehicle/VehicleDeleteList"
      :api-params="ids"
      @click="fnRefreshTable"
    >
      批量删除
    </delete-button>
    <el-tag>233</el-tag>
    <add-button @Confirm="(fn) => fn()"> </add-button>
    <el-button class="btn" @click="obj.isMb = !obj.isMb">测试table高度自适应</el-button>
  </div>
  <v-table
    ref="refVehicle"
    class="flex-auto"
    paging-mode="local"
    api-url="/basic/Vehicle/Page"
    :api-params="model"
    :columns="columns"
    @selection-change="selectionChange"
  >
    <template #default="scope">
      <base-button type="text" @click="fnCrud(scope.row)">详情</base-button>
      <delete-button
        type="text"
        api-url="/basic/Vehicle/VehicleDelete"
        :api-params="scope.row"
        @click="fnRefreshTable"
      >
        删除
      </delete-button>
    </template>
  </v-table>
</template>

<script setup lang="ts">
import VTag from './index'
const obj = reactive({
  isMb: false,
  model: {
    cardNum: '',
    age: '',
    gender: 1,
    time: null,
  },
  formItems: [
    {
      prop: 'name',
      label: '姓名',
      is: 'el-input',
    },
    {
      prop: 'cardNum',
      label: '定位卡号',
      is: 'el-input',
    },
    {
      prop: 'gender',
      label: '性别',
      is: 'el-select',
      options: [
        {
          label: '男',
          value: 1,
        },
        {
          label: '女',
          value: 0,
        },
      ],
    },
    {
      prop: 'time',
      label: '时间',
      is: 'el-date-picker',
      attrs: {
        type: 'date',
        placeholder: 'Pick a day',
      },
    },
    {
      is: 'slot',
      name: 'search',
      prop: '',
      label: '',
    },
  ],
  ids: [],
  tableData: [{ name: '张三', gender: 1, age: 13 }],
  columns: [
    {
      type: 'selection',
      width: '60px',
    },
    {
      type: 'index',
      label: '序号',
      width: '55px',
    },
    {
      prop: 'vehicleNum',
      label: '车牌号',
    },
    {
      prop: 'cardNum',
      label: '定位卡号',
    },
    {
      prop: 'gender',
      label: '性别',
      formatter: (row: { gender: any }) => {
        let text = row.gender ? '男' : '女'
        let type = row.gender ? 'success' : ''
        let class1 = row.gender ? 'el-tag--success' : 'el-tag--primary'
        // let html = <el-tag type={type}>{text}</el-tag>
        // let html =  <p domPropsInnerHTML={this.newText}></p>
        let html = h(VTag, {
          type,
          text,
        })
        // let html1 = h('span', { class: ['el-tag', class1] }, text)
        // let html2 = h('span', { style: { color: 'violet' } }, text)
        // let html3  = resolveComponent('baseButton')
        return html
      },
    },
    {
      prop: 'age',
      label: '年龄',
      formatter: (row) => {
        let html = h('ElButton', 233)
        return html
      },
    },
    {
      prop: 'operation',
      label: '操作',
    },
  ],
})
const refVehicle = ref(null)
// const { proxy } = getCurrentInstance()
const fnCrud = (row: any) => {
  console.log('row', row)
  if (obj.ids.length) {
    console.log('obj.ids', obj.ids)
  }
}
const fnRefreshTable = (fn: () => void) => {
  if (typeof fn === 'function') fn()
  ;(refVehicle.value as unknown as HTMLFormElement).handleGetList()
}
const handleClear = () => {
  // Object.keys(obj.model).map((v) => {
  //   if (obj.model.hasOwnProperty(v)) {
  //     obj.model[v] = null
  //   }
  // })
}
const selectionChange = (val: any) => {
  obj.ids = val
}
const { model, formItems, ids, tableData, columns } = toRefs(obj)
</script>

<style scoped></style>
